<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{$detail.name} - {$config.WEB_SITE_TITLE}</title>
    <script src="__PUBLIC__/Home/js/adaptive.js"></script>
    <script src="__PUBLIC__/Home/js/device.min.js"></script>
    <link rel="stylesheet" href="__PUBLIC__/Home/css/reset.css">
    <script src="__PUBLIC__/Home/js/mui.min.js"></script>
    <link href="__PUBLIC__/Home/css/mui.min.css" rel="stylesheet"/>
    <link rel="stylesheet" href="__PUBLIC__/Home/css/swiper-3.4.2.min.css">

    <style>
        h4,h5{margin-top: 0px;margin-bottom: 0px;}
        input::-webkit-input-placeholder,
        textarea::-webkit-input-placeholder {
            color: #9B9B9B;font-size: 0.32rem;
        }
        html{background: #fff;touch-action: none;font-family: "微软雅黑"}
        .content{width: 7.5rem;height: auto;margin: 0 auto;background: #f5f5f5;}
        .top{width: 100%;height: auto;text-align: center;position: relative;}
        .top .back{width: 0.25rem;height: 0.25rem;display: block;border-bottom: 2px solid #fff;
            border-left: 2px solid #fff;transform: rotate(45deg);position: absolute;left: 0.35rem;top:0.3rem;z-index: 100}
        .top img{width: 100%;height: 4.14rem;}


        .center{width: 100%;height: 3.5rem;padding: 0.33rem;position: relative;background: #fff;}
        .center  .title{width: 100%;height: 0.8rem;display: inline-block;    overflow : hidden;margin-right: 0px;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;color: #444444;font-size: 0.32rem;margin-bottom: 0.25rem;}
       .center  .jie{width: 100%;height:auto ;display: inline-block;color: #666}

        .xinxi{display: flex;justify-content: space-between;margin-top: 0.2rem;color: #6A6A6A;font-size: 0.26reem}
         .xinxi li:first-child{color: #FC5624;font-size: 0.34rem}
        /*文字展示*/
        .pingjia{width: 100%;height: 5.56rem;background: #fff;margin-top: 0.33rem;}

        .pingjia .xq{height: 0.66rem;font-size: 0.36rem;line-height: 0.88rem;color: #333;padding-left: 0.2rem}
        .pingjia img{width: 100%;height: 0.86rem;}
        .pj-list{width: 100%;height: auto;padding: 0.2rem 0.33rem;position: relative;overflow: hidden;margin-bottom: 1.5rem;}
        .pj-list li{position: relative ;background: #fff;height:auto;min-height: 2rem;border-bottom: 1px solid #DEDEDE;
            margin-bottom: 0.4rem;padding-bottom: 0.2rem;}
        .pj-list p{font-size: 0.32rem;color: #424C4B;margin-bottom: 0.3rem;}
        .pj-list  .touxiang{width: 0.5rem;height: 0.5rem;border-radius: 50%;}
        .pj-list  .name{color: #04101E;position: absolute;left: 0.7rem;top: 0.1rem;}
        .pj-list  .txt{width: 100%;height: auto;display: block;margin: 0.15rem 0px;}
        .pj-list  time{color: #9C9B9C;position: absolute;top: 0.1rem;right: 0.3rem;}
        .pj-list li:last-child{border-bottom: none}


        .look{width: 2.22rem;text-align: center;line-height: 0.52rem;color: #666;
            display: inline-block;position: absolute;right: 0.2rem;top: 0.2rem;}
        .look img{width: 0.2rem;height: 0.3rem;position: relative;top: 0.05rem;margin-left: 0.05rem;}

        /*图片展示*/
        .show-img{width: 100%;height: auto;}
        .show-img li{width: 100%;height: 6.2rem}
        .show-img li img{width: 100%;height: 6.2rem}

        .btm{width: 100%;height: 1rem;position: fixed;bottom: 0px;display: flex;justify-content: center;border-top: 1px solid #DEDEDE}
        .btm a{width: 2.75rem;height: 100%;text-align: center;line-height: 1rem;color: #333;font-size: 0.32rem;display: inline-block;}
        .btm a:nth-child(2){background:#F7E7B5 }
        .btm span:nth-child(1){width: 2rem;font-size: 0.3rem;height: 100%;line-height: 1rem;text-align: right;padding-right: 0.4rem;
          box-sizing: border-box;background: #fff;}
        .btm a:last-child{background:#EBC247 }
        .btm span:nth-child(1) img{width: 0.5rem;height: 0.5rem; position: absolute;top: 0.2rem;left: 0.4rem}
    </style>
</head>
<body>
<div class="content">
    <div class="top">
        <span class="back"></span>
        <!--轮播区域-->
        <div class="swiper-container">
            <div class="swiper-wrapper">
            <volist name="imgs" id="vo">
                <div class="swiper-slide"><img src="{$vo.path}" alt="">
                </div>
            </volist>    
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>

        </div>

    </div>



    <div class="center">
         <span class="title duohang">{$detail.name}</span>
        <span class=" jie danhang">{$detail.des}</span>

        <ul class="xinxi">
            <li>积分：<span >{$detail.point}</span></li>

            <li>已兑换：<span>{$detail.has_exc}</span></li>
        </ul>



    </div>



    <div class="pingjia">
        <p class="xq">商品详情</p>
        <div>
            {$detail.detail}
        </div>
        <ul class="pj-list">
            <p>评价({$comNum})</p>
            <a href="{:U('Index/pro_all_com',array('id'=>$detail[goods_id]))}" class="look">查看全部 <img src="__PUBLIC__/Home/img/back-right.png" alt=""></a>
            
            <volist name="com" id='vo'>
                <li>
                    <img src="{$vo.head_pic}" alt="" class="touxiang">
                    <span class="name">{$vo.user_name}</span>
                    <span class="txt">{$vo.com}</span>
                    <time>{$vo.time}</time>
                </li>
           </volist>

        </ul>



        <div class="btm">
           <span class="sc"><img src="__PUBLIC__/Home/img/<if condition="$detail.is_co eq 1">sc1.1%20.png<else />sc1.png</if>" alt="" class="sc1" data-stu="{$detail.is_co}" >收藏</span>
            <a href="#" class="join_cart">加入购物车</a>
            <a href="{:U('Index/Orders')}">立即兑换</a>
        </div>
    </div>




</div>

<script src="__PUBLIC__/Home/js/jquery-1.11.1.js"></script>
<script src="__PUBLIC__/Home/js/swiper-3.4.2.min.js"></script>
<script src="__PUBLIC__/Home/js/look-img.js"></script>
<script src="__PUBLIC__/Home/layer_m/layer.js"></script>
<script>
    $(".join_cart").click(function(){
            $.ajax({
                method:'post',
                url:"{:U('Index/joinCart')}",
                dataType:'json',
                data:{
                    id:{$detail.goods_id}
                },success:function(data){
                   layer.open({
                        content:data.msg
                        ,skin: 'msg'
                        ,time: 2 //2秒后自动关闭
                      });
                }
            })

    })
    $(".back").click(function () {
        window.history.back(-1);
    })

    $(".sc").click(function () {
         var status=0;
        let src=$(this).children(".sc1").attr("src");
        let sel= "__PUBLIC__/Home/img/sc1.1%20.png";
        if(src==sel){
            $(this).children(".sc1").attr("src","__PUBLIC__/Home/img/sc1.png")
        }else{
            $(this).children(".sc1").attr("src",sel)
        }

       let ch=$('.sc1').attr("data-stu");
        if(ch==1){
            $('.sc1').attr("data-stu",0);
        }else {
            $('.sc1').attr("data-stu",1);
            status=1;
        }
        $.ajax({
            method:'post',
            dataType:'json',
            url:"{:U('Index/changeColl')}",
            data:{
                id:{$detail.goods_id},
                status:status
            },success:function(data){
                 layer.open({
                    content: data.msg
                    ,btn: '我知道了'
                  });

            }

        })
    })

</script>
<script>    

    var swiper = new Swiper('.swiper-container', {
        autoplay:3000,
        loop:true,
        pagination: '.swiper-pagination',

    });

</script>




</body>
</html>